<script>
import axios from "axios";
import {nanoid} from "nanoid";

export default {
  name: "Message",
  data() {
    return {
      messageList: []
    }
  },
  mounted() {
    for (let i = 0; i < 5; i++) {
      axios.get('https://v1.jinrishici.com/all.json').then(response => {
        // console.log(JSON.stringify(response.data));
        const message = {
          id: nanoid(),
          content: response.data.content,
          origin: response.data.origin,
          author: response.data.author,
          category: response.data.category,
        };
        // console.log(JSON.stringify(message));
        this.messageList.push(message);
      }).catch(error => {
        console.log(error)
      })
    }
  },
  methods: {
    pushShow(message) {
      // 此处使用的路由器$router，而不是路由$route进行操作。其中push里面的对象是和router-link的to属性一致性的。
      this.$router.push({
        name: `detail`, // 其中params传参的话，不能使用path传参，否则报错。只能使用name进行传参
        params: {
          id: message.id,
          content: message.content,
          origin: message.origin,
          author: message.author,
          category: message.category,
        }
      })
    },
    replaceShow(message) {
      // 此处使用的路由器$router，而不是路由$route进行操作。其中push里面的对象是和router-link的to属性一致性的。
      this.$router.replace({
        name: `detail`, // 其中params传参的话，不能使用path传参，否则报错。只能使用name进行传参
        params: {
          id: message.id,
          content: message.content,
          origin: message.origin,
          author: message.author,
          category: message.category,
        }
      })
    }
  },
  beforeDestroy() {
    console.log("Message组件即将被销毁了！");
  }
}
</script>

<template>
  <div>
    <ul>
      <li v-for="message in messageList" :key="message.id">
        <!-- 跳转路由并携带 query 参数，to的字符串写法。可以对比下面的params参数的写法 -->
        <!-- <router-link :to="`/home/message/detail?id=${message.id}`">{{ message.content }}</router-link>&nbsp;&nbsp;-->
        <!-- 跳转路由并携带 params 参数，to的字符串写法 -->
        <!-- <router-link
            :to="`/home/message/detail/${message.id}/${message.content}/${message.origin}/${message.author}/${message.category}`">
          {{ message.content }}
        </router-link>&nbsp;&nbsp;-->

        <!-- 【命名路由】：其中可以使用name来指定路由的命令，从而省略path指定路由路径的写法 -->
        <router-link :to="{
          name: `detail`, // 其中params传参的话，不能使用path传参，否则报错。只能使用name进行传参
          params: {
            id: message.id,
            content: message.content,
            origin: message.origin,
            author: message.author,
            category: message.category,
          }
        }">
          {{ message.content }}
          <button @click="pushShow(message)">push查看</button>
          <button @click="replaceShow(message)">replace查看</button>
        </router-link>&nbsp;&nbsp;
      </li>
    </ul>
    <hr>
    <!-- 其中router-view进行展示数据使用 -->
    <router-view></router-view>
  </div>
</template>

<style scoped>

</style>